<template>
  <div class="app-container">


    <!-- 表格组件 -->
    <ex-tree-table
      ref="exTreeTable"
      :loading.sync="loading"
      :tableColumn="tableColumn"
      :tableData="tableData"
      @handleAddSonNodeEventEmit="handleAddSonNodeEventEmit"
      @handleCreateEmit="handleCreateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
      @handleUpdateEmit="handleUpdateEmit"
    >
    </ex-tree-table>


    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData.sync="formSubmitData"
      :parentNodeName="parentNodeName"
      @handleFromAddSonNodeEmit="handleFromAddSonNodeEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import XEUtils from 'xe-utils'


import {
  organizationAddciorganization,
  organizationAddorganization,
  organizationDeleteorganization,
  organizationFindorganizationall,
  organizationUpdateorganization
} from './service/baseApi'
// 基础表格组件
import ExTreeTable from './components/ExTreeTable'

// 文章表单
import SubmitForm from './components/SubmitForm'

//信息提示框
import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExTreeTable,
    SubmitForm,
  },
  // 定义属性
  data() {
    return {

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      parentNodeName: '',  //父级节点名称
      // 表单数据对象
      formSubmitData: {
        id: '',
        branch_abd: '',
        branch_code: '',
        branch_flag: '',
        branch_name: '',
        branchlevel: '',
        lp_code: '',
        ord_num: 0,
        parent_branch_id: '',
        remark: '',
        rg_date: '',
        status: "1",
        te_date: '',
      },
      initFormSubmitData: {
        id: '',
        branch_abd: '',
        branch_code: '',
        branch_flag: '',
        branch_name: '',
        branchlevel: '',
        lp_code: '',
        ord_num: 0,
        parent_branch_id: '',
        remark: '',
        rg_date: '',
        status: "1",
        te_date: '',
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    /* API数据操作相关 */
    // 查询数据
    findList() {
      this.loading = true
      console.log(' this.formSearchData:::', this.formSearchData);
      // 请求表格数据
      organizationFindorganizationall({}).then(({data}) => {
        console.log('response:....', data);
        // 给表格数据赋值
        const treeData = XEUtils.toArrayTree(data, {
          key: 'branch_code',
          parentKey: 'parent_branch_id',
        })
        console.log('treeDatatreeData', treeData);
        this.tableData = treeData
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }, error => {
        console.log('getList:error', error);
        // alert(error);
      })
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
      
        {field: 'branch_name', title: '机构名称', width: 250, treeNode: true, fixed: 'left'},
        
        {field: 'branch_code', title: '机构编码', width: 300},
      
        {field: 'lp_name', title: '所属法人', width: 200},
      
        {field: 'remark', title: '备注', width: 200},
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {
      this.dialogStatus = type
      // 重置表单内容
      this.resetFormSubmitData({
        replaceObj: {
          lp_code: '123456', /* TODO: 后期改为登录用户信息中的法人id */
          parent_branch_id: '0'
        }
      })
      this.parentNodeName = '一级'

      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      let {children, mod_date, mod_us_code, ...params} = Object.assign({}, row) // copy obj
      console.log('item:', params);
      params = XEUtils.objectMap(params, item => {
        return (XEUtils.isNull(item)) ? '' : item
      })
      console.log('item2:', params);
      this.formSubmitData = params
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      console.log('delrow:', row);
      if (row.children.length > 0) {
        this.$message.error('删除失败:还有子集！');
        return false;
      }
      console.log("AJAX 请求删除单行数据");
      organizationDeleteorganization({
        ...row
      }).then(({data}) => {

     
        this.dialogFormVisible = false
        // this.$message.success('删除成功');
        this.$refs.exTreeTable.$refs.xTree.remove(row)
        this.findList()
        console.log('response:....', data);

      })


    },
    // 行内按钮-新增子机构
    handleAddSonNodeEventEmit(row, type) {
      this.resetFormSubmitData({
        replaceObj: {
          lp_code: '123456',  /* TODO: 后期改为登录用户信息中的法人id */
          parent_branch_id: row.branch_code
        }
      })
      this.parentNodeName = row.branch_name
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },

    /* 表单组件相关 */
    // 修改机构
    handleFromUpdateDataEmit() {
      organizationUpdateorganization({
        ...this.formSubmitData
      }).then(({data}) => {

        this.dialogFormVisible = false
        // this.$message.success('修改成功');
        this.findList()
        console.log('response:....', data);

      })

    },
    // 新增一级机构
    handleFromCreateDataEmit() {

      organizationAddorganization({
        ...this.formSubmitData
      }).then(({data}) => {

      

        this.findList()
        console.log('response:....', data);

      })
    },
    // 新增子机构
    handleFromAddSonNodeEmit() {
      organizationAddciorganization({
        ...this.formSubmitData
      }).then(({data}) => {
       
        this.findList()
        console.log('response:....', data);

      })
    }


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()

    // organizationFindorganizationall()


  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>